import { useRef } from "react";
import { StyledAgree, StyledCancel } from "@/components/button";
import { ProForm } from "@ant-design/pro-components";
import { Alert, Divider, Form, message, Space } from "antd";
import UpoladItem from "@/components/upload-item";
import LGV from "@/assets/image/icons/LGV.svg";
import Motorcycle from "@/assets/image/icons/Motorcycle.svg";
import privatecar from "@/assets/image/icons/privatecar.svg";
import { PaddingContent, ContentBorder } from "@/components/page-padding";
import { CustomTitle } from "@/components/customTitle";
import SubmissionCheckbox from "@/components/lpn-submission-checkbox";
import lpnStore from "@/store/lpnStore";
import "./index.less";
// import { createFileFromBase64, stringToFile } from "@/utils";
import useBase64ToFileList from "@/hooks/useBase64ToFileList";
const EditMyLPN = () => {
  const [form] = Form.useForm();
  const formRef = useRef(form);
  // const location = useLocation();
  const { data } = lpnStore();
  const type = data?.type;
  console.log(type, "type");
  const approvalStatus = data?.approvalStatus;
  console.log(data, "data");

  if (data && data.doc) {
    const base64String = data?.doc?.[0]?.data;
    const fileName = "myImage.png"; // 你想要的文件名
    const fileType = "image/png"; // 文件类型，根据需要修改

    console.log(base64String, "base64String");
    const file = useBase64ToFileList(base64String, fileName, fileType);
    console.log(file, "file11");
  } // 你的 Base64 字符串
  // const filename = "yourfile.png"; // 合适的文件名

  // // 将 Base64 转换成 File 对象
  // const file = stringToFile(base64String, filename);

  // const base64 = data.doc[0].data; // 替换为你的 Base64 字符串

  // // 获取查询参数对象
  // const queryParams = new URLSearchParams(location.search);
  // console.log(queryParams, "Form values queryParams");

  // // 获取参数 vehicleType 的值
  // const valueOfVehicleType = queryParams.get("vehicleType");
  // console.log("Form values valueOfVehicleType=", valueOfVehicleType);
  // const approvalStatus: string | undefined =
  //   queryParams.get("approvalStatus") ?? undefined;
  // const [historyUrl, setHistoryUrl] = useState(
  //   "/myRegistered-lpn/edit/confirm?vehicleType=PRIVATECAR&approvalStatus=PENDING"
  // );
  const onFinish = async (values: any) => {
    console.log("Form values===== historyUrl", values);
    // values.vehicleType = valueOfVehicleType;
    // // 处理提交逻辑
    // history.push(historyUrl);
  };
  //错误验证拦截
  const onFinishFailed = () => {
    message.error({ content: "please check required field" });
    const firstInvalidField = document.querySelector(
      ".ant-form-item-has-error"
    );
    if (firstInvalidField) {
      firstInvalidField.scrollIntoView({ behavior: "smooth" });
    }
  };

  const handleChildStateChange = (childState: boolean) => {
    if (childState === true) {
      // setHistoryUrl("/myRegistered-lpn/list");
    }
  };

  return (
    <>
      <PaddingContent>
        <CustomTitle>Edit My License Plate Number</CustomTitle>
        <ContentBorder className="edit-lpn">
          <Alert
            message="License Plate Number Amendment Policy"
            type="warning"
            showIcon={true}
            //icon={<img src={AlertFill} alt="SVG Image" />}
            description={
              <div
                dangerouslySetInnerHTML={{
                  __html:
                    "Each license plate number is allowed to be amended only once per year. If you need to make additional amendments (twice or more), an extra fee will apply. Please plan your changes accordingly.",
                }}
              />
            }
          />
          <div className="top-text">
            Each type of vehicle can only be registered once.
          </div>
          <ProForm
            initialValues={{}}
            form={form}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            submitter={{
              render: () => (
                <div style={{ textAlign: "center" }}>
                  <Space size="large">
                    <StyledCancel
                      type="default"
                      //onClick={() => formRef.current?.resetFields()}
                      // onClick={handleCancelBtn}
                      className="footer-button"
                    >
                      Cancel
                    </StyledCancel>
                    <StyledAgree
                      onClick={() => formRef.current?.submit()}
                      className="footer-button"
                      type="default"
                    >
                      {"Submit"}
                    </StyledAgree>
                  </Space>
                </div>
              ),
            }}
          >
            {type === "PRIVATE_CAR" && (
              <UpoladItem
                leftText="Private Car"
                icon={privatecar}
                formName="privateCar"
                isDelLPN={true}
                approvalStatus={approvalStatus}
                onStateDelChange={handleChildStateChange}
                // fileList={file}
              />
            )}
            {type === "MOTOR_CYCLE" && (
              <UpoladItem
                leftText="Motorcycle"
                icon={Motorcycle}
                formName="motorcycle"
                isDelLPN={true}
                approvalStatus={approvalStatus}
              />
            )}
            {type === "LGV" && (
              <>
                <UpoladItem
                  leftText="Large Goods Vehicle"
                  icon={LGV}
                  formName="LGV"
                  isDelLPN={true}
                  approvalStatus={approvalStatus}
                />
              </>
            )}
            <Divider plain></Divider>

            <SubmissionCheckbox form={form} checkGroupName="checkGroup" />
          </ProForm>
        </ContentBorder>
      </PaddingContent>
    </>
  );
};

export default EditMyLPN;
